<template>
  <div class="container list">
    <topTip ref="topTip">
      <div class="topTip">{{mes}}</div>
    </topTip>
    <div class="content">
      <div v-show="resultData.length">
        <div class="title">综合信息查询</div>
        <table>
          <tr>
            <th class="active">序号</th>
            <th class="active name">名字</th>
            <th class="active">车牌号</th>
            <th class="active">违章地点</th>
            <th class="active detail">违章原因</th>
            <th class="active">违章时间</th>
          </tr>
          <tr v-for="(item,index) in resultData" @click="selectBtn(item)">
            <td>{{index+1}}</td>
            <td>{{item.party}}</td>
            <td>{{item.carnumber}}</td>
            <td>{{item.transgressaddress}}</td>
            <td>{{item.briefofcase}}</td>
            <td>{{item.transgresstime.substring(0,16)}}</td>
          </tr>
        </table>
        <div class="mes">
          <p>*&nbsp如对查询结果有任何疑问，请到单位窗口咨询.</p>
          <p>*&nbsp如罚款3万以上用户，请到单位窗口咨询.</p>
        </div>
      </div>
      <boxConfirm ref="showbox" text="是否加入代办清单" @confirm="confirmbtn"></boxConfirm>
      <loading v-show="showresult&&!resultData.length"></loading>
      <div class="contmes" v-show="!resultData.length&&!showresult">
        没有找到你要的数据！！
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import http from '../util/https'
  import boxConfirm from "./confirm/confirm"
  import loading from "./loading"
  import topTip from './top-tip/top-tip'
  import {baseurl} from '../base/config'
  export default {
    name: "list",
    data() {
      return {
        username: this.$route.params.username,
        id: this.$route.params.id,
        LicenseNub: this.$route.params.LicenseNub,
        serialNub: this.$route.params.serialNub,
        number: this.$route.params.number,
        resultData: [],
        tip: "",
        actionid: -20,//案件id,
        mes: "温馨提示:已成功加入个人清单列表",
        showresult: true
      }
    },
    components: {
      loading,
      topTip,
      boxConfirm
    },
    methods: {
      //获取数据列表
      fetchData: async function () {
        // if (!this.username) {
        //   this.$router.push({
        //     name: 'confirm',
        //   });
        //   return
        // }
        const url = baseurl + '/caseQuery/casesQuery';
        let params = {
          party: this.username, //人名
          Id: this.id,  //身份证
          code: this.number, //案件编号
          carnumber: this.LicenseNub,//车牌号
        };
        const res = await http.get(url, params);
        console.log(res);
        if (res.data.code === 0) {
          this.showresult = true;
          setTimeout(() => {
              this.resultData = res.data.data
            },
            100);
          setTimeout(() => {
            if (!this.resultData.length) {
              this.showresult = false;
            }
          }, 6000)
        } else if (res.status === -404 || res.data.code !== 0) {
          this.showresult = false
        }
      },
      selectBtn(item) {
        const showBox = this.$refs.showbox;
        showBox.show();
        this.actionid = item.id

      },
      //加入待办清单
      confirmbtn: async function () {
        const tip = this.$refs.topTip;
        tip.show();
        const url = baseurl + "/detailList/addDetailList.json";
        let params = {
          id: this.actionid
        };
        const res = await http.post(url, params);
        if (res.data.code === 502) {
          this.mes = "该案件已在清单中！";
          this.$refs.topTip.show();
        } else if (res.data.code === 501) {
          this.mes = "请先实名认证！";
          this.$refs.topTip.show();
          setTimeout(() => {
            this.$router.push({
              name: "index"
            })
          }, 1500)
        }
      }
    },
    mounted() {
      this.fetchData()
    }
  }
</script>
<style scoped lang="less" type="text/less">
  .list {
    .contmes {
      text-align: center;
      font-size: .35rem;
      line-height: 10rem;
      height: 100%;
    }
    .topTip {
      font-size: .35rem;
      text-align: center;
      height: .8rem;
      line-height: .8rem;
      background: #449d44;
      color: #fff;

    }
    .content {
      z-index: 10;
      padding: 0 1%;
      .title {
        text-align: center;
        font-size: .5rem;
        margin: .2rem 0 .4rem 0;
        color: #449d44;
        padding-top: .2rem;
      }
      table {
        border: 1px solid #ccc;
        margin: 0 auto;
        font-size: .2rem;
        text-align: center;
      }
      tr th {
        background: #f5f5f5;
      }
      table tr th {
        text-align: center;
      }

      table tr td, tr th {
        border: 1px solid #ccc;
        font-size: .25rem;
        text-align: left;
      }
      table tr td {
        padding: .03rem;
        line-height: .35rem;
      }
      tr th {
        line-height: .4rem;
        text-align: center;
        padding: .2rem 0;

      }
      .detail {
        width: 180px;
      }
      .name {
        width: 40px;

      }
      .mes {
        color: red;
        /*padding: 0 .3rem;*/
        font-size: .28rem;
        margin-top: .2rem;
        padding: 0 .5rem;
        margin-bottom: 2rem;
        p {
          line-height: .6rem;
        }
      }

    }
  }


</style>
